{% load get_item %}
<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>添加角色</title>
    <link rel="stylesheet" href="/static/dashboard.css">
    <link rel="stylesheet" href="/static/dashboard-theme.css">
</head>
<body>
    <div class="dashboard-container">
    {% include 'sidebar.html' %}
        <main class="main-content">
            <div class="row justify-content-center">
                <div class="">
                    <div class="card shadow-sm rounded p-4">
                        <h4 class="mb-3">添加角色</h4>
                        {% if error %}
                        <div class="alert alert-danger">{{ error }}</div>
                        {% endif %}
                        <form method="post">
                            {% csrf_token %}
                            <div class="mb-3">
                                <label for="name" class="form-label">角色名称</label>
                                <input type="text" class="form-control" id="name" name="name" required>
                            </div>
                            <div class="mb-3">
                                <label class="form-label">权限</label>
                                <div class="row">
                                    {% for perm in permissions %}
                                    <div class="col-6">
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" name="permissions" value="{{ perm.id }}" id="perm{{ perm.id }}">
                                            <label class="form-check-label" for="perm{{ perm.id }}">{{ perm_cn|get_item:perm.codename|default:perm.name }}</label>
                                        </div>
                                    </div>
                                    {% endfor %}
                                </div>
                            </div>
                            <button type="submit" class="btn btn-primary w-100">添加</button>
                        </form>
                        <div class="mt-3">
                            <a href="/roles/" class="btn btn-secondary w-100">返回角色列表</a>
                        </div>
                    </div>
                </div>
            </div>
        </main>
    </div>
</body>
</html>
